@charset "utf-8";
/*********************
* chat center
* Author: Feil.Wang
* Date: 2013.12
*********************/

html,body{ height:100%; width:100%;  font-family:Helvetica, Arial, sans-serif}
.bg{ background-color:#3a3f45; display:table; min-height:735px; *overflow:hidden; *position:relative; _height:expression(this.offsetHeight<750?"750":true);}
.wrap{ display:table-cell; vertical-align:middle;   *position:absolute;  *top:50%; }
.container{ position:relative; width:1000px; height:735px; padding-top: 10px; margin:0 auto; background-color: #333333;  *position:relative;  *top:-50%; border:1px solid #111;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 20px rgba(0,0,0,.5);
    box-shadow: 0 0 20px rgba(0,0,0,.5);}
.main{ height:735px; position:relative;}

/*chrome scrollbar style*/
::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
::-webkit-scrollbar-thumb {
    overflow: visible;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: rgba(102,102,102,.8);
}

.admin-icon,
.clear-text-btn,
.arrow-icon,
.camera-icon,
.mic-icon,
.h-camera-icon,
.h-mic-icon,
.arrow-icon,
.clear-text-btn,
.win-close-btn{ background:url(../images/sprite-vchat-2.png) no-repeat;_background:url(../images/sprite-vchat-2-ie6.png) no-repeat;}
.admin-icon{ display:inline-block; width:20px; height:20px; background-position:0 0; vertical-align:middle; margin:0 3px 3px 0;}
.camera-icon,
.mic-icon,
.h-camera-icon,
.h-mic-icon{ width:20px; height:20px; display:block; position:absolute; right:20px; top:6px; cursor:pointer;}
.camera-icon{ background-position:-20px 0;}
.mic-icon{background-position:-40px 0;}
.h-camera-icon{background-position:-60px 0;}
.h-mic-icon{background-position:-80px -0;}
.chat-left{ float: left; width: 272px;}
.chat-right{ float: right; position: relative; width: 728px; height: 735px; overflow: hidden;}
.win-close-btn{ background-position: right -20px; width: 24px; height: 24px; position: absolute; right: -10px; top: -10px; z-index: 99;}

.participant-list-wrap{ color: #fff; position: relative; z-index: 10; background-color: #363636;  width: 272px;overflow: hidden; }
.participant-list-t{ height: 35px; line-height: 35px; padding-left: 20px;
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
    background: -webkit-linear-gradient(bottom, #2a2a2a, #3e3e3e);
    background: -moz-linear-gradient(bottom, #2a2a2a, #3e3e3e);
    background: -o-linear-gradient(bottom, #2a2a2a,#3e3e3e);
    background: linear-gradient(to top, #2a2a2a, #3e3e3e);
    filter: progid:dximagetransform.microsoft.gradient(GradientType=0,startColorstr='#ff3e3e3e',endColorstr='#ff2a2a2a');}
.u-num{ padding: 3px 6px; margin-left: 10px; background-color: #151515; border:1px solid #212121; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; box-shadow: inset 0 0 1px #333333; }
.participant-list{ height: 656px; overflow: hidden; }
.participant-list li{ height:32px; line-height:32px; padding:0 50px 0 30px; border-bottom:1px solid #2c2c2c; position:relative; overflow:hidden; text-overflow:ellipsis; clear: both; zoom:1; width: 192px;}
.participant-list li:hover{ background-color:#404040;}
.participant-list li .name{ color:#cfcfcf; }
.participant-list li .role-admin{ color:#ff4444;}
.participant-list li .admin-icon{ position:absolute; left:5px; top:5px; margin:0;}

.vchat-disp-wrap{ position: absolute; height: 406px; width: 272px; left: 0; top: 285px; }
.v-disp-item{ position: absolute; left: 0;opacity: 0;filter:alpha(opacity=0); width: 272px; height: 201px; background: url(../images/video-default-bg-2.jpg) no-repeat;}
.vchat-window{ width: 272px; height: 201px;}
.u-name{ position: absolute; right: 10px; top: 10px;   border: 1px solid #636363;padding:0 7px; background: rgba(0,0,0,.3);
    filter: progid:dximagetransform.microsoft.gradient(GradientType=0,startColorstr='#4c000000',endColorstr='#4c000000'); *filter: none; *background:#333; ;
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
.u-name span{ display: inline-block; vertical-align: middle; color: #fff; max-width: 85px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width:expression(this.offsetWidth>85?"85px":true);}
.u-name .admin-icon{ margin: -2px 0 0 -3px;}

.request-area{ position: absolute; top: 691px; left: 0; width: 272px; padding-top: 10px; text-align: center;border-top:1px solid #2c2c2c;}
.vchat-btn,.arrow-switch,.arrow-switch-down,.send-btn{background: url(../images/vchat-btn-2.png) no-repeat; display: inline-block; _background: url(../images/vchat-btn-ie6-2.png) no-repeat; }

.vchat-btn{ width:110px; height:27px;  margin:0 3px;}
.open-video{ background-position:0 0;}
.open-video:hover{background-position:0 -27px;}
.open-video:active{background-position:0 -54px;}
.close-video{background-position:0 -162px;}
.close-video:hover{background-position:0 -189px;}
.close-video:active{background-position:0 -216px;}
.request-video{background-position:0 -81px;}
.request-video:hover{background-position:0 -108px;}
.request-video:active{background-position:0 -135px;}
.cancel-video{background-position:0 -243px;}
.cancel-video:hover{background-position:0 -270px;}
.cancel-video:active{background-position:0 -297px;}

.open-voice{ background-position:-110px 0;}
.open-voice:hover{background-position:-110px -27px;}
.open-voice:active{background-position:-110px -54px;}
.close-voice{background-position:-110px -162px;}
.close-voice:hover{background-position:-110px -189px;}
.close-voice:active{background-position:-110px -216px;}
.request-voice{background-position:-110px -81px;}
.request-voice:hover{background-position:-110px -108px;}
.request-voice:active{background-position:-110px -135px;}
.cancel-voice{background-position:-110px -243px;}
.cancel-voice:hover{background-position:-110px -270px;}
.cancel-voice:active{background-position:-110px -297px;}

.waiting{background-position:0px -482px; cursor:default;}

.img-area{ height: 400px; position: relative;}
.top-layer{ position: absolute; left: 0; top: 0; height: 65px; width: 100%; background: rgba(255,255,255,.5); filter: progid:dximagetransform.microsoft.gradient(GradientType=0,startColorstr='#b2ffffff',endColorstr='#b2ffffff');}
.logo{ float: left; margin:10px 0 0 10px;}
.logo img{ height: 45px;}
.top-layer h3{ float: left; font-size: 18px; font-weight: normal; padding: 0 0 0 20px; line-height: 65px;}
.status{ float: right; text-align: right; padding: 10px 15px 0 0;}
.status .connected,.status .unconnect{ padding: 2px 5px; color:#fff; background-color: #34a35c; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}
.status span.unconnect{ background-color: #e8153d;}
.arrow-switch,.arrow-switch-down{ position: absolute; right: 20px; top: 40px; height:15px; width: 22px; background-position: right -330px;}
.arrow-switch:hover{background-position: right -345px;}
.arrow-switch-down{background-position: right -360px;}
.arrow-switch-down:hover{background-position: right -375px;}

.forecast-scroll{ position: absolute; left: 0; top: 65px; width: 100%; height: 25px; overflow: hidden; background: rgba(255,255,255,.7); filter: progid:dximagetransform.microsoft.gradient(GradientType=0,startColorstr='#7fffffff',endColorstr='#7fffffff');}
.forecast-list{ margin: 0 20px;}
.forecast-list li{ height: 25px; line-height: 25px;}
.forecast-list li span{ padding-right: 50px;}

.banner-img{ text-align: center;}

.text-chat-wrap{ position:absolute; left:0; bottom:0;}
.text-chat-main{ width:728px; background-color:#fff; overflow:hidden;}
.chat-msg-list{ width: 728px;}
.chat-msg-list li{padding:15px; *zoom:1; border-bottom:1px solid #ececec;}
.chat-msg-list li:after{content:''; display:block; height:0; clear:both; visibility: hidden; }
.chat-msg-list li.odd{ background-color:#fbfbfb;}
.u-avatar{ float:left; position:relative;}
.e-vcard{ display:none; width:85px; height:30px; position:absolute; top:23px; left:0; background:url(../images/u-tips.png);}
.chat-msg-list dl{ float:left; padding-left:10px; width: 650px; word-break:break-all}
.other-name{ color:#39F;}
.role-admin dd{}
.role-myself dd{}
.chat-msg-list dt{ font-weight:bold;}
.u-avatar img{ width:36px; height:36px; border:1px solid #ccc; border-radius:3px; vertical-align:bottom;}
.text-chat-btm{ height:72px; padding:12px 12px 12px; border-top:1px solid #bfbfbf; background-color:#f5f5f5;  border-radius: 0 0 5px 0; -webkit-border-radius: 0 0 5px 0; -moz-border-radius: 0 0 5px 0; position:relative;}

.text-chat-t{ height: 26px; margin-bottom: 10px;}
.text-controls{ float: left; height:26px; margin-left: 50px;}
.text-style-item{ float:left; padding:1px 8px; border-right:1px solid #d4d4d4;}
.text-style-item .ckbx{  vertical-align:middle; margin:1px 0 0 0}
.underline-icon,.bold-icon,.italic-icon,.t-arrow{ display:inline-block; vertical-align:middle;width:16px; height:16px; background:url(../images/text-style.png);}
.bold-icon{ background-position:0 -16px;}
.italic-icon{ background-position:0 -32px;}
.text-color-wrap{ float:left; margin-left:8px; padding:2px; background-color:#fff; border:1px solid #d4d4d4;  position:relative;cursor:pointer;}
.txt-cur-color{ float:left; width:25px; height:16px;}
.t-arrow{ float:left; width:10px; height:10px; background-position:0 -48px; margin-top:3px; font-size:0;}
.text-color-container{ display:none; width:88px; position:absolute; left:-1px; bottom:20px; padding:8px; border:1px solid #d4d4d4; background-color:#fff; cursor:default;}
.text-color-list li{ float:left;}
.text-color-list li a{ float:left; width:16px; height:16px; margin:2px; _display:inline; border:1px solid #ddd;}
.text-color-list li a:hover{ border:1px solid #F90;}

.text-input{ float: left; width:590px; height:24px; border:1px solid #c7c7c7; resize:none; padding:5px; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; box-shadow:0 1px 3px #CCCCCC inset; -webkit-box-shadow:0 1px 3px #CCCCCC inset;; -moz-box-shadow:0 1px 3px #CCCCCC inset; overflow:auto;}
.text-input-focus{border:1px solid #32b3fc;}
.redFlash{ background-color:#FFD4D4; border:1px solid #fdabab}
.clear-text-btn{ display:none; width:20px; height:20px; background-position:0 -20px; position:absolute; top:8px; left:565px;}
.text-chat-b{ position: relative; height: 36px;}
.select-user{ float: left; position:relative; z-index: 99; width:110px; height:24px; border:1px solid #c7c7c7; background-color:#fff; cursor:pointer;border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;}
.cur-user{ float:left; width:75px; line-height:24px; padding-left:8px; overflow:hidden; text-overflow:ellipsis;}
.arrow-icon{ display:block; width:9px; height:9px; float:right; margin:7px 10px 0 0; background-position:-20px -20px; font-size:0; _display:inline;}
.user-list-wrap{ display:none; width:110px; position:absolute; bottom:23px; left:-1px; z-index:9999; border:1px solid #c7c7c7; background-color:#fff;border-bottom:none;border-top-left-radius:3px; border-top-right-radius:3px;}
.user-list li{ position:relative; width: 110px;}
.user-list li a{ display:block; padding:3px 8px; height:18px; line-height:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative;}
.user-list li a:hover{ background-color:#e2e2e2;}
.send-btn{ width:88px; height:36px; line-height: 36px; color: #fff; font-size: 16px; text-align: center; font-weight: bold; float:right; background-position:-110px -324px;}
.send-btn:hover{background-position:-110px -360px;}
.send-btn:active{background-position:-110px -396px;}

.ask-only{ float: left; padding: 3px 0 0 150px;}
.checkbox input{ vertical-align: middle; margin:0 3px 3px 0;}

